<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <!-- 全局注册 -->
        <demo></demo>    
        <!-- 局部注册 -->
        <first></first>
        <odiv></odiv>
    </div>

    <script>

        Vue.component("demo",{
            template:"<h3> Demo - Demo - demo</h3>",
            data(){
                return {}
            },
            computed:{}
        })
        Vue.component("odiv",{
            template:"<h4>jiaYou</h4>"
        })
        const vm = new Vue({
            data: {
                title: "Vue component  自定义组件"
            },
            components: {
                first: {
                    template: "<h2>First - vue 组件初始化  </h2>"
                }
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title
            },
        }).$mount('#app');
    </script>
</body>

</html>